<template>
  <div class="instoreset">
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>店内设置</span>
      </div>
    </div>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="堂食设置" name="foodset">
              <el-form ref="form" :model="form" label-width="180px" class="mar_t20">
                  <el-form-item label="营业时间" :required="true">
                      <el-radio-group v-model="form.timeType">
                          <el-radio label="1" border>全天24小时营业</el-radio>
                          <el-radio label="2" border>设置营业时间</el-radio>
                      </el-radio-group>
                      <div v-if="form.timeType=='2'" class="mar_t10">
                          <div class="time_item mar_b10" v-for="(item,index) in timeArr" :key="index">
                              <el-time-select
                                      v-model="item.startTime"
                                      :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"
                                      placeholder="选择时间"
                                      @change="selectTime($event,item,index,1)"
                                      style="width: 220px;">
                              </el-time-select>
                              <span class="mar_lr10">-</span>
                              <span class="mar_r10" v-if="item.ciri">次日</span>
                              <el-time-select
                                      v-model="item.endTime"
                                      :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"
                                      placeholder="选择时间"
                                      @change="selectTime($event,item,index,2)"
                                      style="width: 220px;"
                              >
                              </el-time-select>
                              <el-button type="text" @click="deltimeInterval(index)" class="fon_12 mar_l10">删除
                              </el-button>
                          </div>
                          <el-button v-show="this.timeArr.length<3" type="text" @click="addtimeInterval">
                              <Icon type="md-add"/>
                              添加营业时间
                          </el-button>
                      </div>
                  </el-form-item>
                  <el-form-item label="商家公告">
                      <el-input v-model="form.notice" type="textarea" placeholder="请输入商家公告" class=""></el-input>
                  </el-form-item>
                  <el-form-item label="下单公告">
                      <el-input v-model="form.orderNotice" type="textarea" placeholder="请输入下单公告" class=""></el-input>
                  </el-form-item>
                  <el-form-item label="下单幻灯片">
                      <div class="uploadSource bor_de rel flex" v-for="(item, index) in form.orderMedia" :key="index">
                          <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)" @mouseleave="leaveMultigraph(index,1)">
                              <i class="el-icon-check" :ref="`list1${index}`"></i>
                              <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                          </label>
                          <img :src="item" @click='test(2)' class="wid img"/>
                      </div>
                      <div class="uploadSource flex-center curs" @click='test(2)'>
                          <i class="el-icon-plus fon_40 color_d9"></i>
                      </div>
                      <attachment-img ref="img2" type="imgs" @attachment='multigraph1'></attachment-img>
                  </el-form-item>
                  <el-form-item label="自动接单">
                      <el-radio-group v-model="form.receiving">
                          <el-radio label="1">开启</el-radio>
                          <el-radio label="2">关闭</el-radio>
                      </el-radio-group>
                    <div class="yb_margin lh16">商家接单后才打印小票，为了防止漏单，建议开启自动接单功能</div>
                  </el-form-item>
                  <el-form-item label="结算模式">
                      <el-radio-group v-model="form.payMode">
                          <el-radio label="1">先结账后用餐</el-radio>
                          <el-radio label="2">先用餐后结账</el-radio>
                      </el-radio-group>
                      <div class="yb_margin lh16" v-show="form.payMode=='1'">顾客点餐付钱后,商家即可收到订单准备上菜</div>
                      <div class="yb_margin lh16" v-show="form.payMode=='2'">顾客点餐下单给商家,商家开始准备上菜,顾客可以吃完后付钱,未支付顾客可以加菜</div>
                  </el-form-item>
                  <el-form-item label="线上支付" v-show="form.payMode=='2'">
                    <el-radio-group v-model="form.onLine">
                      <el-radio label="1">开启</el-radio>
                      <el-radio label="2">关闭</el-radio>
                    </el-radio-group>
                    <div class="yb_margin lh16">关闭线上支付后，用户端将不显示支付按钮，仅能线下结账</div>
                  </el-form-item>
                  <el-form-item label="自动清台" v-show="form.payMode=='1'">
                      <el-radio-group v-model="form.autoClose">
                          <el-radio label="1">开启</el-radio>
                          <el-radio label="2">关闭</el-radio>
                      </el-radio-group>
                      <div class="yb_margin lh16">开启后，如用户下单后超过用户设置的时间，系统将自动清台，请谨慎使用</div>
                  </el-form-item>
                  <el-form-item label="" v-if="form.autoClose=='1'">
                      <el-input v-model="form.closeTime" placeholder="请输入清台时间" type="number" style="width: 340px">
                          <template slot="append">小时自动清台</template>
                      </el-input>
                  </el-form-item>
                  <el-form-item label="点餐模式">
                      <el-radio-group v-model="form.orderMode">
                          <el-radio label="1" v-show="orderMode.indexOf('1')>-1">多人点餐</el-radio>
                          <el-radio label="2" v-show="orderMode.indexOf('2')>-1">拼桌点餐</el-radio>
                      </el-radio-group>
                      <div class="yb_margin lh16" v-show="form.orderMode=='1'">同桌顾客可互相看到点餐内容</div>
                      <div class="yb_margin lh16" v-show="form.orderMode=='2'">多人共用一桌，各自独立点餐下单</div>
                  </el-form-item>
                  <el-form-item label="服务费">
                      <el-radio-group v-model="form.serviceType">
                          <el-radio label="1">按就餐人数收取</el-radio>
                          <el-radio label="2">按每桌台收取</el-radio>
                      </el-radio-group>
                      <div class="fuwuf">
                          <el-input v-model="form.serviceMoney" class="">
                              <template slot="append">
                                  <span class="mar_l10">元/<span v-show="form.serviceType=='1'">位</span><span v-show="form.serviceType=='2'">桌</span></span>
                              </template>
                          </el-input>
                      </div>

                  </el-form-item>
              </el-form>
          </el-tab-pane>
          <el-tab-pane label="快餐设置" name="fastfoodset">
              <el-form ref="form2" :model="form2" label-width="180px" class="mar_t20">
                  <el-form-item label="自动接单">
                      <el-radio-group v-model="form2.receiving">
                          <el-radio label="1">开启</el-radio>
                          <el-radio label="2">关闭</el-radio>
                      </el-radio-group>
                      <div class="yb_margin lh16">此功能关闭后,商家需要手动接单</div>
                  </el-form-item>
                  <el-form-item label="快餐公告">
                      <el-input v-model="form2.notice" type="textarea" placeholder="请输入快餐公告" class=""></el-input>
                  </el-form-item>
                  <el-form-item label="下单公告">
                      <el-input v-model="form2.orderNotice" type="textarea" placeholder="请输入下单公告" class=""></el-input>
                  </el-form-item>
                <el-form-item label="下单幻灯片">
                  <div class="uploadSource bor_de rel flex" v-for="(item, index) in form2.orderMedia" :key="index">
                    <label class="statusLabel curs" @mouseenter="enterMultigraph(index,2)" @mouseleave="leaveMultigraph(index,2)">
                      <i class="el-icon-check" :ref="`list2${index}`"></i>
                      <i class="el-icon-close" @click="deleteMultiImage(item,3,'multigraph')"></i>
                    </label>
                    <img :src="item" @click='test(3)' class="wid img"/>
                  </div>
                  <div class="uploadSource flex-center curs" @click='test(3)'>
                    <i class="el-icon-plus fon_40 color_d9"></i>
                  </div>
                  <attachment-img ref="img3" type="imgs" @attachment='multigraph2'></attachment-img>
                </el-form-item>
                  <el-form-item label="打包盒收费模式">
                      <el-radio-group v-model="form2.boxType">
                          <el-radio label="1">按订单收费</el-radio>
                          <el-radio label="2">按商品收费</el-radio>
                      </el-radio-group>
                      <div class="yb_margin lh16">假设打包盒2元,按订单收费是指该订单收取2元打包盒费</div>
                  </el-form-item>
                  <el-form-item label="打包盒费" class="dabh" v-show="form2.boxType=='1'">
                      <el-input-number v-model="form2.boxMoney" controls-position="right" :min="0" :max="100000000">
                      </el-input-number><span class="mar_l10">元</span>
                  </el-form-item>
                  <el-form-item label="取餐语音文字" class="dabh">
                      <el-input placeholder="请" v-model="form2.phoneticWritingStart">
                          <template slot="append">A001</template>
                      </el-input>
                      <el-input v-model="form2.phoneticWritingEnd" placeholder="号到服务台取餐" class="qucan"></el-input>
                  </el-form-item>
              </el-form>
          </el-tab-pane>
      </el-tabs>
  </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
  import {getStoreConfig, postStoreConfig,getConfig} from "@/api/setup";
  import attachmentImg from "@/plugins/attachment-img";
  import {mapState} from "vuex";
  export default {
      components: {attachmentImg},
      computed: {
          ...mapState(['storeId']),
      },
    created() {
      this.init();
      this.getConfig()
    },
    data () {
      return {
          activeName:'foodset',
          form: {
              timeType: '1',
              orderMedia: [],
              notice: '2',
              orderNotice: '',
              receiving: '1',
              payMode: '1',
              onLine: '1',
              orderMode: '1',
              serviceType: '1',
              serviceMoney: '',
              autoClose: '2',
              closeTime: '3',
          },
          form2:{
              receiving:'1',
              notice:'',
              orderNotice:'',
              boxType:'1',
              orderMedia: [],
              boxMoney:'',
              phoneticWritingStart:'',
              phoneticWritingEnd:'',
          },
          form3:{
              autoClose:'1',
              packingMoney:'',
              please:'',
          },
          timeArr:[],
          orderMode:[],
      }
    },
    methods: {
        async getConfig() {
            const {data} = await getConfig({ident: 'instoreSet',storeId:this.storeId});
            this.orderMode = data.orderMode
        },
      async init() {
          if (this.activeName == 'foodset') {
              const {data} = await getStoreConfig({ident: 'instoreSet',storeId:this.storeId});
              this.formc = this.form
              this.form = Object.assign(this.formc, data);
              if(data.timeArr){
                  this.timeArr = data.timeArr.map((v => (
                      {endTime:v.endTime,ciri:v.ciri,startTime:v.startTime}
                  )))
              }
          } else if (this.activeName == 'fastfoodset') {
              const {data} = await getStoreConfig({ident: 'fastSet',storeId:this.storeId});
              this.formc = this.form2
              this.form2 = Object.assign(this.formc, data);
          }
      },
        handleTabClick(){
            this.init()
        },
        addtimeInterval() {
            let specObj = {startTime: '00:00', endTime: '00:00', ciri: true,}
            this.$set(this.timeArr, this.timeArr.length, specObj)
        },
        deltimeInterval(index) {
            this.$delete(this.timeArr, index)
        },
        selectTime(value, item, index, type) {
            //value是点击返回的时间，item是开始和结束时间，idnex是所有，type是区别是点击开始时间还是结束时间
            //type=1是判断开始时间，2是判断结束时间、、加type为了判断两种情况先选开始时间和先选结束时间
            //如果结束时间小于开始时间就为次日
            // console.log('111',value,item,index,type)
            // console.log('122',value,item.endTime,item.startTime)
            for (let i = 0; i < this.timeArr.length; i++) {
                // console.log('index',i,index)
                if (i == index) {
                    // console.log('当前选择数据')
                    if (type == 1) {
                        if (value >= item.endTime) {
                            // console.log('111111')
                            item.ciri = true
                        } else {
                            item.ciri = false
                        }
                    }
                    if (type == 2) {
                        // console.log('222222')
                        if (value <= item.startTime) {
                            item.ciri = true
                        } else {
                            item.ciri = false
                        }
                    }
                }
            }
        },
        test(i = 0) {
            console.log(this.$refs, i)
            this.$refs['img' + i].dialogVisible = true
        },
        enterMultigraph(index,i=0){
            this.$refs[`list${i}${index}`][0].style.display = 'none';
        },
        leaveMultigraph(index,i=0){
            this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
        },
        imgadd1(url) {
            this.form.icon = url.str
        },
        multigraph1(url) {
            if(this.form.orderMedia && this.form.orderMedia.length>0){
                this.form.orderMedia = this.form.orderMedia.concat(url.arr)
            }else{
                this.form.orderMedia = url.arr
            }
        },
        multigraph2(url) {
          if(this.form2.orderMedia && this.form2.orderMedia.length>0){
            this.form2.orderMedia = this.form2.orderMedia.concat(url.arr)
          }else{
            this.form2.orderMedia = url.arr
          }
        },
        deleteMultiImage(item, index, type) {
            //typem没传是单图multigraph多图；index上传图片组件排序
            Array.prototype.remove = function (val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };
            if (type == 'multigraph') {
                switch (index) {
                    case 2:
                        this.form.orderMedia.remove(item);
                        break
                    case 3:
                      this.form2.orderMedia.remove(item);
                      break
                }
            } else {
                switch (index) {
                    case 1:
                        this.form.icon = '';
                        break
                }
            }
        },
      submitForm() {
          if (this.activeName == 'foodset') {
              this.$refs["form"].validate(async (valid) => {
                  if (valid) {
                      this.form.ident = 'instoreSet'
                      this.form.identName = '堂食设置'
                      this.form.timeArr = this.timeArr
                      this.form.storeId = this.storeId
                      const {msg} = await postStoreConfig(this.form);
                      this.$baseMessage(msg, "success");
                      this.init()
                  } else {
                      return false;
                  }
              });
          } else if (this.activeName == 'fastfoodset') {
              this.$refs["form2"].validate(async (valid) => {
                  if (valid) {
                      this.form2.ident = 'fastSet'
                      this.form2.identName = '快餐设置'
                      this.form2.storeId = this.storeId
                      const {msg} = await postStoreConfig(this.form2);
                      this.$baseMessage(msg, "success");
                      this.init()
                  } else {
                      return false;
                  }
              });
          }
      },
    },
  }
</script>
<style lang="scss">
    .fuwuf .el-input {
        width: 180px;
    }
    .dabh .el-input {
        width: 180px;
    }
    .tqyy .el-input {
        width: 180px;
    }
</style>
